<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>dialogtree下拉树演示</title>
        <script type="text/javascript" src="common/js/jquery-last.js">
        </script>
        <script type="text/javascript" src="common/js/plugin/jquery.simple.tree.js">
        </script>
        <script type="text/javascript" src="common/js/plugin/blackbird.js">
        </script>
        <script type="text/javascript" src="common/js/plugin/bgiframe.js">
        </script>
        <script type="text/javascript" src="common/js/plugin/weebox.js">
        </script>
        <script type="text/javascript" src="common/js/dialogtree.js">
        </script>
        <script type="text/javascript" src="demo.js">
        </script>
        <link rel="stylesheet" type="text/css" href="css/weebox/weebox.css" />
		<!--[if lte IE 6]>
		<link rel="stylesheet" type="text/css" href="css/weebox/weebox_ie6.css" />
		<![endif]-->
        <link rel="stylesheet" type="text/css" href="css/tree/tree.css" />
        <style>
            .selected {
                color: green;
            }
			pre {
				background-color:#F0E68C;
				font-size: 12px;
			}
        </style>
    </head>
    <body>
    	<script type="text/javascript"><!--
google_ad_client = "pub-2169892341197510";
/* 468x60, 创建于 10-2-24 */
google_ad_slot = "8765943375";
google_ad_width = 1000;
google_ad_height = 100;
//-->
</script> 
<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>
    <div id="demo1">
    	
    	<h3>效果一(默认)</h3>
        <span>产品ID：<input type='text' id='productId'/> 产品名称：<input type='text' id='productName' />
            <button id="showTree1">选择产品1</button>
        </span>
		<pre>
var tree1 = new DialogTree({
	templatePath	: 'productTemplate.html',
	ajaxPath 		: 'data.html',
	selectType		: '0',
	onselected		: function(treeObj) {}
});

$('#showTree1').click(function(){
	tree1.registeTree({
		title	: '选择[产品1]',
		id		: '#demo1 #productId', 
		name	: '#demo1 #productName'
	});
});
		</pre>
    </div>
	
	<hr/>
	<div id="demo2">
	<h3>效果二(自定义对话框、树属性，宽度：700，切换树的时候自动关闭其他节点)</h3>
        <span>产品ID：<input type='text' id='productId'/> 产品名称：<input type='text' id='productName' />
            <button id="showTree2">选择产品2</button>
        </span>
		<pre>
var tree2 = new DialogTree({
	templatePath	: 'productTemplate.html',
	ajaxPath 		: 'data.html',
	selectType		: '0',
	weebox		: {width: 700},
	simpletree		: {autoclose: true},
	onselected		: function(treeObj) {}
});

$('#showTree2').click(function(){
	tree2.registeTree({
		title	: '选择[产品2]',
		id		: '#demo2 #productId', 
		name	: '#demo2 #productName'
	});
});
		</pre>
	</div>
	
	<div>
		<h3>参数说明</h3>
		<ul>
			<li>关于weebox的参数设置请参照：<a href="http://code.google.com/p/weebox/" target="_blank">http://code.google.com/p/weebox/</a></li>
			<li>关于simpletree的参数设置请参照：<a href="http://news.kg/wp-content/uploads/tree/" target="_blank">http://news.kg/wp-content/uploads/tree/</a></li>
			<li>
				<p>templatePath：模版路径</p>
				<p>ajaxPath：数据源路径</p>
				<p>selectType：哪个节点类型才是返回值</p>
				<p>weebox：自定义weebox插件属性</p>
				<p>simpletree：自定义simpletree插件属性</p>
				<br/>
				<p>title：打开对话框的名称</p>
				<p>id：显示树中节点的ID属性</p>
				<p>name：显示树中节点的NAME属性</p>
			</li>
		</ul>
	</div>
	
    <hr/>说明：基于<a href="http://code.google.com/p/weebox/" target="_blank">jquery.weebox</a>和<a href="http://news.kg/wp-content/uploads/tree/" target="_blank">jquery.simpletree.js</a>包装的一个
    对话框下拉树，在我的那个开源项目中使用了这两个插件的简单结合，很多网友看了好加我要源码，然后就花一上午时间简单整理了一下<a href="http://www.wsria.cn/wordpress/wp-content/plugins/download-monitor/download.php?id=23">下载</a>
	<br/>
	关于插件：因为是集成使用非本人开发，所以不做成插件形式，大家可以根据自己的需求进行更改
    <hr/>
    <center>
    	插件功能集成 by <a href="http://www.wsria.cn">wsria.cn</a>
	</center> 
	
</body>
<!-- 雅虎流量统计 开始-->
<script type="text/javascript" src="http://js.tongji.linezing.com/946869/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/946869/tongji.php"/></a></noscript>
<!-- 雅虎流量统计 结束-->
</html>
